<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <!-- 导入资源 -->
  <%@ include file="resource.jsp"%>
  <!-- javascript -->
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        $("#img1").attr("src", "captcha.do?r=" + Math.random());
        return false;
      });
    });
  </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="container" style="margin: 24px auto;">
  <div class="row">
    <div  id="main" class="col-md-12">

<p>
  <a href="index.jsp">Home</a>
  >>
  <a href="signup.jsp">Sign Up</a>
</p>
    </div>
  </div>
</div>
<%--<h1 class="center">User Signup</h1>--%>
<form action="UserSignupServlet" method="post"
      style="width: 640px; margin: 0 auto;">
  <div class="row my-4 g-3 align-items-center">
    <div class="col-auto">
      <label for="username" class="col-form-label">Username</label>
    </div>
    <div class="col-auto">
      <input type="text" id="username" name="username"
             class="form-control">
    </div>
    <div class="col-auto">
      <span class="form-text"> Must be 4-20 characters long. </span>
    </div>
  </div>
  <div class="row my-4 g-3 align-items-center">
    <div class="col-auto">
      <label for="password" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
      <input type="password" id="password" name="password"
             class="form-control">
    </div>
    <div class="col-auto">
				<span id="passwordHelpInline" class="form-text"> Must be 4-20
					characters long. </span>
    </div>
  </div>
  <div class="row my-4 g-3 align-items-center">
    <div class="col-auto">
      <label for="password2" class="col-form-label">Confirm
        &nbsp;&nbsp; </label>
    </div>
    <div class="col-auto">
      <input type="password" id="password2" name="password2"
             class="form-control">
    </div>
    <div class="col-auto">
      <span class="form-text"> Confirm your password. </span>
    </div>
  </div>
  <div class="row my-4 g-3 align-items-center">
    <div class="col-auto">
      <label for="captcha" class="col-form-label">Captcha
        &nbsp;&nbsp; </label>
    </div>
    <div class="col-auto">
      <input type="text" id="captcha" name="captcha" class="form-control">
    </div>
    <div class="col-auto">
      <span class="form-text"> Must be 4 characters long. </span>
    </div>
  </div>
  <div class="row my-4 g-3 align-items-center">
    <div class="col-auto">
      <button id="btn1" class="btn">
        <img id="img1" src="captcha.do" style="width: 220px;" /> &nbsp;Refresh
      </button>
    </div>
  </div>
  <button id="submitBtn" type="submit" class="btn btn-primary">Submit</button>
</form>
<%@ include file="footer.jsp"%>
</body>
<script>
  $(document).ready(function() {
    // 输入框获得焦点
    $("#username").focus();

    // 单击btn1
    $("#btn1").click(function() {
      $("#img1").attr("src", "captcha.do?r=" + Math.random());
      return false;
    });

    // 单击 submitBtn
    $("#submitBtn").click(function(){
      let pass = true;
      let username = $("#username");
      let password = $("#password");
      let password2 = $("#password2");
      let captcha = $("#captcha");
      if(username.val()!=null&&username.val().trim().length>=4&&username.val().trim().length<=20){
        username.attr("class","form-control is-valid");
      }else{
        pass = false;
        username.attr("class","form-control is-invalid");
      }
      if(password.val()!=null&&password.val().trim().length>=4&&password.val().trim().length<=20){
        password.attr("class","form-control is-valid");
      }else{
        pass = false;
        password.attr("class","form-control is-invalid");
      }
      if(password.val()== password2.val()&&password2.val()!=null&&password2.val().trim().length>=4&&password2.val().trim().length<=20){
        password2.attr("class","form-control is-valid");
      }else{
        pass = false;
        password2.attr("class","form-control is-invalid");
      }
      if(captcha.val()!=null&&captcha.val().trim().length==4){
        captcha.attr("class","form-control is-valid");
      }else{
        pass = false;
        captcha.attr("class","form-control is-invalid");
      }
      //alert(username + pass);
      return pass;
    });
  });
</script>
</html>